<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>

    <script>


        // (function f() {
        //     let flag = true;      // 通过匿名函数的自调用可以解决全局变量的问题

        //     window.onscroll = function () {
        //         // console.log(1);
        //         if (flag) {
        //             flag = false;
        //             setTimeout(() => {
        //                 console.log(1);   // 实际上要做的事情
        //                 flag = true;
        //             }, 500)
        //         }
        //     }
        // })()



        // 重写事件处理函数   

        // window.onscroll = 函数



        window.onresize = debounce(function (e) {
            console.log(1);
        });









        // function f(cb) {
        //     let flag = true;

        //     return function (e) {   // 真正的事件处理函数
        //         // this 指向事件源

        //         if (flag) {
        //             flag = false;
        //             setTimeout(() => {
        //                 cb.call(this, e);
        //                 flag = true;
        //             }, 500)
        //         }
        //     }
        // }


        function debounce(cb) {
            let t;

            return function (e) {   // 真正的事件处理函数
                // this 指向事件源
                clearTimeout(t);

                t = setTimeout(() => {
                    cb.call(this, e);

                }, 500)
            }
        }





    </script>

</body>

</html>